<template>
  <div class="header-page">
    <div class="block">
      <div class="icon-block">
        <div class="name">{{appTitle}}</div>
      </div>
      <div  class="menu-block">
        <template v-for="(item) in menuList">
          <div class="menu-item" v-if="item.id!==3&&item.id!==4" @click="jump(item.url)" :key="item.id" :class="item.active.includes($route.path)||item.url===$route.path?'active':''">{{item.value}}</div>
<!--          <router-link v-if="item.id!==3&&item.id!==4" :to="item.url" :key="item.id" :exact="true" active-class="active" class="menu-item">{{ item.value }}</router-link>-->
          <a v-else :href="item.url" :key="item.id" target="_blank" class="menu-item">{{ item.value }}</a>
        </template>
      </div>
      <el-dropdown class="el-dropdown" v-if="user&&identity">
        <span class="menu-login">{{ user.realName }}<img class="login-face" :src="user.faceUrl" @error="imgError"/></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link :to=" identity=== '1'?{name:'candidateCenter'}:{name:'enterpriseCenter'}">个人中心</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="editItem">修改密码</div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="feedback">意见反馈</div>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="loginOut">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="el-dropdown" v-else>
        <span class="menu-login" @click="toLogin">登录/注册</span>
      </el-dropdown>
      <Tools v-if="user" :data="[{id:1,template:'<span>我的</span><span>消息</span>',url:'/im/index'}]"></Tools>
    </div>
    <el-dialog title="修改密码" v-if="dialogVisible" :visible.sync="dialogVisible" width="30%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="20vh" :destroy-on-close="true">
      <ChangePassword ref="password"></ChangePassword>
      <span slot="footer" class="dialog-footer" >
        <el-button plain type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.password.submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="意见反馈" v-if="feedbackDialogVisible" :visible.sync="feedbackDialogVisible" width="30%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="20vh" :destroy-on-close="true">
      <Feedback ref="feedback"></Feedback>
      <span slot="footer" class="dialog-footer" >
        <el-button plain type="primary" @click="feedbackDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.feedback.submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Tools from "@/components/Tools/Tools";
import ChangePassword from "@/components/ChangePassword/ChangePassword";
import Feedback from "@/components/Feedback/Feedback";
export default {
  name: "Header",
  components: {Feedback, ChangePassword, Tools},
  data() {
    return {
      menuList: [
        {id: 1, value: '首页', url: '/home/index', active: ['/job-fair/job-fair','/job-fair/index','/job-fair/company-detail','/difficult-job/difficult-job','/difficult-job/difficult-detail']},
        {id: 2, value: '招聘求职', url: '/job-careers/job-careers', active: ['/position/position-detail','/company/company','/position/position-filtrate','/personal/personal-detail','/personal/personal-filtrate']},
        {id: 3, value: '事业单位招考报名', url: 'http://125.74.216.25:81/',},
        // {id: 4, value: '零工超市', url: 'https://szjy.lgcs.gshwsc.com/'},
        {id: 5, value: '职业技能培训', url: '/skill/skill-index',active: ['/skill/course-detail','/skill/detail','/skill/policy-list','/skill/video-list','/skill/course-list']},
        {id: 6, value: '政策法规', url: '/policyIndex',active:['/policyList','/skillNewDetails']},
        {id: 7, value: '直播带岗', url: '/live/live',active: ['/live/endLive']},
      ],
      dialogVisible: false,
      appTitle:'',
      feedbackDialogVisible:false
    }
  },
  mounted() {
    this.appTitle = this.appConfig.appTitle
  },
  methods: {
    jump(url){
      this.$router.push(url)
    },
    imgError() {
      this.user.faceUrl = process.env.VUE_APP_FACE_URL;
    },
    loginOut() {
      this.$store.commit('user/SET_TOKEN', null);
      this.$store.commit('user/SET_USER', null);
      this.$store.commit('user/SET_IDENTITY', '');
      this.tim.logout();
      this.$router.push({
        name: 'Login'
      })
    },
    toLogin() {
      this.$router.push({
        name: 'Login'
      })
    },
    editItem() {
      this.dialogVisible = true;
    },
    feedback(){
      this.feedbackDialogVisible=true
    },
  },
  computed: {
    ...mapGetters(['user', 'identity'])
  }
}
</script>

<style scoped lang="scss">
.header-page {
  width: 100%;
  height: 65px;
  background: $black;

  .block {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;

    .icon-block {
      width: 180px;
      margin-right: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      img {
        width: 100%;
        height: 100%;
      }
      .name{
        font-family: fzhzgbjt;
        font-size: 24px;
        margin-left: 15px;
        color: #fff;
      }
    }
    .el-dropdown{
      width: 100px !important;
    }
    .menu-block {
      width: 75%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      .menu-item {
        height: 100%;
        color: #fff;
        margin: 0 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-bottom: 4px solid rgba(0, 0, 0, 0);
      }

      .menu-item.active {
        font-weight: bold;
        border-bottom: 4px solid #fff;
      }
    }

    .menu-login {
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      border-bottom: 4px solid rgba(0, 0, 0, 0);

      .login-face {
        width: 30px;
        height: 30px;
        margin-left: 10px;
        border-radius: 30px;
      }
    }
  }
}
</style>
